<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Edit:${item.name }</title>
<style type="text/css">
body
{
	padding-left: 150px;
}
.tdLeft
{
	font-weight: bold;
	background-color: #6589D1;
	color:white;
	font-family: arial;
	width: 100px;
}
.tdRight
{
	background-color: #DAE6FF;
	width: 100px;
}
</style>
<script>
function addType()
{

	if($("#name_text").val()=="")return;
	$.ajax(
	{
		url:"gameAction!addType.action?name="+$('#name_text').val(),
		success:function(mess)
		{			
			$("#type_select").append("<option value="+mess+">"+$('#name_text').val()+"</option>");
			$("#name_text").val("");
		}			
	});
}

function addTheme()
{

	if($("#name_text2").val()=="")return;
	$.ajax(
	{
		url:"gameAction!addTheme.action?name="+$('#name_text2').val(),
		success:function(mess)
		{			
			$("#theme_select").append("<option value="+mess+">"+$('#name_text2').val()+"</option>");
			$("#name_text2").val("");
		}			
	});
}
</script>
</head>
<body>
Edit:${item.name } ID:${item.id }
<form action="gameAction!updateItem.action">
<table>
<tr><td class="tdLeft">ID</td><td class="tdRight"><input type="text" name="id" value="${item.id }"></td></tr>
<tr><td class="tdLeft">Name</td><td class="tdRight"><input type="text" name="item.name" value="${item.name }"></td></tr>	
<tr><td class="tdLeft">HP</td><td class="tdRight"><input type="text" name="item.hp" value="${item.hp }"></td></tr>
<tr><td class="tdLeft">MP</td><td class="tdRight"><input type="text" name="item.mp" value="${item.mp }"></td></tr>
<tr><td class="tdLeft">Damage</td><td class="tdRight"><input type="text" name="item.damage" value="${item.damage }"></td></tr>
<tr><td class="tdLeft">Defend</td><td class="tdRight"><input type="text" name="item.defend" value="${item.defend }"></td></tr>
<tr><td class="tdLeft">Effect</td><td class="tdRight"><textarea style="width:400px;height:250px;" name="item.effect" >${item.effect }</textarea></td></tr>
<tr><td class="tdLeft">Type</td><td class="tdRight">
<select name="item.itemType.id" id="type_select">
<c:forEach items="${itemTypes }" var="type" >
<option value="${type.id }">${type.name }</option>
</c:forEach>
</select>
<input type="text" name="name" id="name_text"><input type="button" value="Add new type" onclick="addType()">
</td></tr>
<tr><td class="tdLeft">Theme</td><td class="tdRight">
<select name="item.itemTheme.id"  id="theme_select">
<c:forEach items="${itemThemes }" var="theme">
<option value="${theme.id }">${theme.name }</option>
</c:forEach>
</select>
<input type="text" name="name" id="name_text2"><input type="button" value="Add new theme" onclick="addTheme()">
</td></tr>
</table>
<input type="hidden" name="item.id" value="${item.id }">
<input type="submit" value="update">
</form>
</body>
<script>
$("#type_select").val(${item.itemType.id});
$("#theme_select").val(${item.itemTheme.id});
</script>
</html>